<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面水比例计算器</title>
    <style>
        .tit {
            display: flex;
            justify-content: center;
            font-size: 28px;
            font-weight: bold;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .unt {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 22px;
        }

        select {
            border: 0;
            border-bottom: 2px solid;
            font-size: 22px;
        }

        .cssMianFenZhongLiang {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .cssMianFenZhongLiang input {
            width: 65px;
            border: 0;
            border-bottom: 2px solid;
            font-size: 22px;
        }

        .cssHanShuiLiang {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .cssHanShuiLiang div:first-child {
            margin-bottom: 20px;
        }

        .cssHanShuiLiang input {
            width: 80px;
            height: 30px;
            margin-right: 10px;
        }

        .cssHanShuiLiang label {
            font-size: 26px;
            font-weight: bold;
        }

        .cssHanShuiLiang span {
            margin-right: 20px;
            font-size: 26px;
            font-weight: bold;
        }

        .cssHanShuiLiang button {
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 10%;
            background-color: #f5d099;
            font-size: 16px;
        }

        .cssHanShuiLiang button:active {
            transform: scale(0.98);
        }

        .cssJiaShuiLiang {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 30px;
            font-size: 22px;
        }

        .cssJiaShuiLiang div {
            margin-bottom: 10px;
        }

        .cssJiaShuiLiang span {
            font-size: 26px;
            font-weight: bold;
        }

        .cssZongZhongLiang {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .cssZongZhongLiang div {
            margin-bottom: 10px;
        }

        .cssZongZhongLiang span {
            font-size: 26px;
            font-weight: bold;
        }

        .cssFenGe{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 16px;
        }

        .cssBiLiAnNiu {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .cssBiLiAnNiu button {
            width: 60px;
            height: 40px;
            border: 0;
            border-radius: 10%;
            background-color: #b1e8fe;
            font-size: 22px;
            margin-bottom: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .cssBiLiAnNiu button:active {
            transform: scale(0.97);
        }

        .cssMianJiZi {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .cssMianJiZi input {
            width: 65px;
            border: 0;
            border-bottom: 2px solid;
            font-size: 22px;
        }

        .cssMianJiZibtn {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .cssMianJiZibtn button {
            width: 100px;
            height: 40px;
            border: 0;
            border-radius: 10%;
            background-color: #e7b1fe;
            font-size: 16px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .cssNum {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .cssNum div {
            margin-bottom: 10px;
        }

        .cssNum span {
            font-size: 26px;
            font-weight: bold;
        }

        .cssZhuShi {
            margin-left: 5%;
            margin-right: 5%;
            font-size: 20px;
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <div class="tit">我家和面的面水比例计算器</div>

    <div class="unt">
        <label for="zhongLiangDanWei">单位：</label>
        <select name="zhongLiangDanWei" id="danWei" onchange="changeUnit()">
            <option value="g">克</option>
            <option value="两">两</option>
            <option value="斤">斤</option>
            <option value="kg">千克</option>
            <option value="公斤">公斤</option>
            <option value="t">吨</option>
            <option value="lb">磅</option>
            <option value="oz">盎司</option>
        </select>
    </div>

    <div class="cssMianFenZhongLiang">
        <div>面粉重量：</div>
        <input type="number" id="flour" value="0" oninput="countWater()"></input>
        <span id="mianFenUnits">g</span>
    </div>

    <div class="cssHanShuiLiang">
        <div>面团含水量：</div>
        <div style="width: 100%;"></div>
        <input type="range" id="doughratio" min="40" max="75" value="50" step="1" oninput="rangevalue()"
            onchange="rangevalue()">
        <label for="doughratio" id="doughRatioValue">50</label>
        <span>%</span>
        <div>
            <button id="zhengJia" onclick="jia()">▲</button>
            <button id="jianShao" onclick="jian()">▼</button>
        </div>
    </div>

    <div class="cssBiLiAnNiu">
        <button id="shouGanMian" onclick="shouGanMian()">47%</button>
        <button id="jiaoZiPi" onclick="jiaoZiPi()">50%</button>
        <button id="zhenMianTou" onclick="zhenMianTou()">55%</button>
        <button id="faMianBing" onclick="faMianBing()">63%</button>
    </div>

    <div class="cssJiaShuiLiang">
        <div>加水量：</div>
        <div style="width: 100%;"></div>
        <span id="water">0.00</span>
        <span id="waterUnits">g</span>
    </div>

    <div class="cssZongZhongLiang">
        <div>面团总重量：</div>
        <div style="width: 100%;"></div>
        <span id="total">0.00</span>
        <span id="totalUnits">g</span>
    </div>
    <div class="cssFenGe">——🥟🥟🥟计算个数🥟🥟🥟——</div>
    <div class="cssMianJiZi">
        <div>单个面剂子重量：</div>
        <input type="number" id="mianJi" value="0" oninput="jiZiJISuan()"></input>
        <span>g</span>
    </div>

    <div class="cssMianJiZibtn">
        <button id="danGeJiaoZiPi" onclick="danGeJiaoZiPi()">饺子皮8g</button>
        <button id="danGeBaoZiPi" onclick="danGeBaoZiPi()">包子皮80g</button>
        <button id="danGeManTou" onclick="danGeManTou()">馒头100g</button>
    </div>

    <div class="cssNum">
        <div>可做数量：</div>
        <div style="width: 100%;"></div>
        <span id="num">0</span><span>个</span>
    </div>

    <div class="cssZhuShi">
        <p>我常用的面水比例在45%-60%之间，死面最常用的比例为50%。发面我一般喜欢用55%。根据不同面粉的筋度和品牌不同，需要多次尝试后找到最合适的比例。</p>
        <p>手擀面通常需要比较硬的面团，我家用45%-50%之间。有些商用比例可能会更低，更硬的面团操作起来更加费力，吃起来也会更硬。</p>
        <p>我一般不太使用65%以上的面团，在做发面软饼时可能会使用63%-65%这个比例。有些商用比例甚至会达到70%，有些烘焙用面团（比如法棍）也会达到70%甚至更高的比例。</p>
    </div>

    <script>
        function rangevalue() {
            var range = document.getElementById("doughratio");
            var value = document.getElementById("doughRatioValue");
            value.innerHTML = range.value;
            countWater();
        }
        function countWater() {
            var flour = document.getElementById("flour").value;
            var doughratio = document.getElementById("doughratio").value / 100;
            var water = (flour * doughratio).toFixed(2);
            document.getElementById("water").innerHTML = water;
            var total = (parseFloat(flour) + parseFloat(water)).toFixed(2);
            if (total == "NaN") {
                total = "0.00";
                document.getElementById("total").innerHTML = total;
            } else {
                document.getElementById("total").innerHTML = total;
            }
            jiZiJISuan();
        }
        function changeUnit() {
            var unit = document.getElementById("danWei").value;
            document.getElementById("mianFenUnits").innerHTML = unit;
            document.getElementById("waterUnits").innerHTML = unit;
            document.getElementById("totalUnits").innerHTML = unit;
            if (unit != "g") {
                document.getElementById("num").innerHTML = "仅在单位为“克”的情况下计算可做几";
            } else {
                jiZiJISuan();
            }
        }
        function jia() {
            var range = document.getElementById("doughratio");
            range.value = parseInt(range.value) + 1;
            rangevalue();
        }
        function jian() {
            var range = document.getElementById("doughratio");
            range.value = parseInt(range.value) - 1;
            rangevalue();
        }
        function shouGanMian() {
            document.getElementById("doughratio").value = 47;
            rangevalue();
            jiZiJISuan();
        }
        function jiaoZiPi() {
            document.getElementById("doughratio").value = 50;
            rangevalue();
            jiZiJISuan();
        }
        function zhenMianTou() {
            document.getElementById("doughratio").value = 55;
            rangevalue();
            jiZiJISuan();
        }
        function faMianBing() {
            document.getElementById("doughratio").value = 63;
            rangevalue();
            jiZiJISuan();
        }
        function jiZiJISuan() {
            var unit = document.getElementById("danWei").value;
            var mianJi = document.getElementById("mianJi").value;
            if (unit == "g" && mianJi != 0) {
                var total = document.getElementById("total").innerHTML;
                var num = (parseFloat(total) / parseFloat(mianJi)).toFixed(2);
                document.getElementById("num").innerHTML = num;
            }
        }
        function danGeJiaoZiPi() {
            document.getElementById("mianJi").value = "8";
            jiZiJISuan();
        }
        function danGeBaoZiPi() {
            document.getElementById("mianJi").value = "80";
            jiZiJISuan();
        }
        function danGeManTou() {
            document.getElementById("mianJi").value = "100";
            jiZiJISuan();
        }
    </script>
</body>

</html>